<template>
    <div class="statistical-three">
        <div class="head-title">
            <span>{{
                activeName == 4
                    ? "预约统计"
                    : activeName == 5
                    ? "拿货记录"
                    : "销售记录"
            }}</span>
        </div>
        <div class="infoData-box" v-if="infoData">
            <div class="sele-box">
                <el-form ref="selectForm" :model="selectForm">
                    <el-form-item
                        v-if="
                            (activeName == 1 ||
                                activeName == 5 ||
                                activeName == 6) &&
                            aboutLimit
                        "
                    >
                        <el-select
                            v-model="selectForm.is_yy"
                            class="select-w"
                            @change="cheSelectFun(1)"
                        >
                            <el-option
                                v-for="infoData in good_type_list"
                                :label="infoData.name"
                                :value="infoData.id"
                                :key="infoData.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="selectForm.shopid"
                            class="select-w"
                            v-if="activeName == 4"
                            @change="cheSelectFun(2)"
                        >
                            <el-option
                                v-for="item in optionList.shop_ls"
                                :label="item.name"
                                :value="item.id"
                                :key="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="activeName == 4">
                        <el-select
                            v-model="selectForm.uid_cp"
                            class="select-w"
                            @change="cheSelectFun(3)"
                        >
                            <el-option
                                v-for="item in optionList.staff_ls"
                                :label="item.name"
                                :value="item.id"
                                :key="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="selectForm.time"
                            class="select-w"
                            @change="cheSelectFun(4)"
                        >
                            <el-option
                                v-for="infoData in optionList.mtime"
                                :label="infoData.title"
                                :value="infoData.id"
                                :key="infoData.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="time-box" v-if="selectForm.stime">
                <el-tag
                    closable
                    color="#fff"
                    @close="resetDate"
                    @click="setTimeFun"
                    >{{ `${selectForm.stime} 至 ${selectForm.dtime}` }}</el-tag
                >
            </div>
            <div class="info-box" v-if="list.length > 0">
                <div
                    class="img-box"
                    :class="activeName == 2 || activeName == 3 ? 'img-w' : ''"
                >
                    <img
                        v-if="
                            activeName == 2 ||
                            activeName == 3 ||
                            activeName == 4 ||
                            infoData.rel_img
                        "
                        :src="infoData.img ? infoData.img : img_buf"
                        alt=""
                    />
                    <span v-else-if="infoData.title">{{
                        infoData.title[0]
                    }}</span>
                </div>
                <div class="content-box">
                    <div class="title">
                        <span v-if="infoData.title">{{ infoData.title }}</span>
                        <span v-if="activeName == 4">{{
                            infoData.shop_name
                        }}</span>
                        <span
                            v-if="activeName == 6 && infoData.position"
                            class="tag"
                            >{{ infoData.position }}</span
                        >
                    </div>
                    <!-- <div class="doc" v-if="activeName == 2 || activeName == 3">
                        <span>{{ infoData.gd_brand }}</span>
                    </div> -->
                    <div class="data-box">
                        <div class="felx">
                            <div class="data">
                                {{ activeName == 4 ? "预约单数：" : "单数：" }}
                                {{ infoData.num_od }}
                            </div>
                            <div class="data">
                                {{ activeName == 4 ? "消耗金额：" : "金额：" }}
                                {{ infoData.amount }}
                            </div>
                        </div>
                        <div class="felx felx-w">
                            <div class="data">
                                {{ activeName == 4 ? "消耗次数：" : "数量：" }}
                                {{ infoData.number_min || infoData.number }}
                            </div>
                            <div class="data">
                                {{ activeName == 4 ? "成本金额：" : "毛利：" }}
                                {{
                                    activeName == 4
                                        ? infoData.cost
                                        : infoData.profit
                                }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div
                class="list-box comm-list"
                :class="this.selectForm.stime ? 'list-box-h' : ''"
                v-infinite-scroll="loadFun"
                v-if="list.length > 0"
            >
                <div
                    class="list-row"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <div class="img-box" v-if="activeName == 5">
                        <img :src="item.gdimg ? item.gdimg : img_buf" alt="" />
                    </div>
                    <div class="info" :class="activeName == 5 ? 'info-w' : ''">
                        <div class="title-time">
                            <div class="title">
                                <span>{{
                                    activeName == 5
                                        ? item.gdname
                                        : item.customer_name
                                }}</span>
                                <span class="name" v-if="item.company">{{
                                    item.company
                                }}</span>
                                <span v-if="item.no"
                                    >预约号：{{ item.no }}</span
                                >
                            </div>
                            <div class="time">
                                <span>{{
                                    item.etime ||
                                    item.atime ||
                                    item.book_time_txt ||
                                    item.time
                                }}</span>
                            </div>
                        </div>
                        <div class="doc" v-if="item.brand">
                            <span>{{ item.brand }}</span>
                        </div>
                        <div class="data-num">
                            <div
                                class="num"
                                v-if="activeName == 2 || activeName == 3"
                            >
                                均价 {{ item.price }}
                            </div>
                            <div class="num">
                                {{
                                    activeName == 4
                                        ? "次数"
                                        : activeName == 5
                                        ? "总量"
                                        : "数量"
                                }}
                                {{ item.number || item.number_min }}
                            </div>
                            <div class="num">
                                {{ activeName == 5 ? "总额" : "金额" }}
                                {{ item.amount }}
                            </div>
                            <div class="num" v-if="activeName == 4">
                                时长 {{ item.tlong }}
                            </div>
                            <div class="num" v-if="item.cost || item.profit">
                                {{ activeName == 4 ? "成本" : "毛利" }}
                                {{ item.cost || item.profit }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <empty v-else></empty>
        </div>
        <empty v-else></empty>
        <dateWin
            ref="dateWin"
            @selectDate="selectDate"
            @closeDate="closeDate"
        ></dateWin>
    </div>
</template>

<script>
import staticConst from "@/js/const/StaticConst.js";
import empty from "../../comm/empty.vue";
import config from "@/js/conf/Config.js";
import dateWin from "@/components/comm/DateWin.vue";
import accessCtrl from "@/js/limit/AccessCtrl.js";

export default {
    components: { empty, dateWin },

    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            infoData: null,
            aboutLimit: false,
            activeName: "1",
            selectForm: {
                page: 0,
                pfrom: 0,
                pnum: "20",
                shopid: "",
                customerid: "",
                staffid: "",
                uid_cp: "",
                gdid: "",
                dtime: "",
                stime: "",
                time: "",
                is_yy: "2",
            },
            good_type_list: [
                {
                    id: "2",
                    name: "按产品",
                },
                {
                    id: "1",
                    name: "按服务",
                },
            ],
            optionList: {},
            list: [],
            is_soll: false,
        };
    },
    methods: {
        initData(data) {
            this.emptyDataAll();
            this.activeName = data.activeName;
            this.infoData = Object.assign({}, data.listItem);
            this.optionList = Object.assign({}, data.optionList);
            this.selectForm.shopid =
                data.activeName == 1 ? data.listItem.id : "";
            this.selectForm.customerid = data.listItem.id;
            this.selectForm.staffid = data.listItem.id;
            this.selectForm.gdid = data.listItem.id;
            this.selectForm.is_yy = data.activeName == 3 ? "1" : "2";
            this.getDetailsData();
        },
        // 重置时间
        resetDate() {
            this.selectForm.time = "";
            this.selectForm.stime = "";
            this.selectForm.dtime = "";
            this.cheSelectFun();
        },
        // 取消时间选择
        closeDate() {
            if (this.selectForm.stime == "") {
                this.selectForm.time = "";
            }
        },
        // 期间选择器
        selectDate(st, et) {
            this.emptyData();
            this.selectForm.stime = st;
            this.selectForm.dtime = et;
            this.getDetailsData();
        },
        // 打开时间选择器
        setTimeFun() {
            this.$refs.dateWin.show("show");
        },
        cheSelectFun(type) {
            if (this.selectForm.time != 5) {
                this.selectForm.stime = "";
                this.selectForm.dtime = "";
            }
            if (type == 4 && this.selectForm.time == 5) {
                this.setTimeFun();
            } else {
                this.emptyData();
                this.getDetailsData();
            }
        },
        loadFun() {
            if (this.is_soll) return;
            this.selectForm.pfrom += 20;
            this.getDetailsData();
        },
        async getDetailsData() {
            this.aboutLimit = await accessCtrl.getAboutLimit();
            this.is_soll = true;
            let url = this.getapiUrl(this.activeName);
            let param = this.selectForm;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (
                    res.data.data_ls ||
                    res.data.data ||
                    res.data.ls ||
                    res.data.goods_ls
                ) {
                    this.list = this.list.concat(
                        res.data.data_ls ||
                            res.data.data ||
                            res.data.ls ||
                            res.data.goods_ls
                    );
                    setTimeout(() => {
                        this.is_soll = false;
                    }, 200);
                } else {
                    this.is_soll = true;
                }
                if (res.data.count) {
                    this.infoData = Object.assign(
                        this.infoData,
                        res.data.count
                    );
                }
                if (res.data.info) {
                    this.infoData = Object.assign(this.infoData, res.data.info);
                }
                if (res.data.mtime) {
                    this.optionList.mtime = res.data.mtime;
                    this.selectForm.time = this.selectForm.time
                        ? this.selectForm.time
                        : res.data.mtime[0].id;
                    if (res.data.mtime[0].title.indexOf("日期") < 0) {
                        res.data.mtime[0].title += "日期";
                    }
                }
            }
        },
        getapiUrl(val) {
            if (val == 1) {
                return config.REPORT_SELL_SHOP;
            } else if (val == 2 || val == 3) {
                return config.REPORT_SELL_GOODS;
            } else if (val == 4) {
                return config.REPORT_BOOK_CUSTOMER_LS;
            } else if (val == 5) {
                return config.REPORT_SELL_CUSTOM;
            } else if (val == 6) {
                return config.REPORT_SELL_STAFF;
            }
        },
        emptyData() {
            this.selectForm.pfrom = 0;
            this.list = [];
            this.is_soll = false;
        },
        emptyDataAll() {
            this.list = [];
            this.is_soll = false;
            this.selectForm = {
                page: 0,
                pfrom: 0,
                pnum: "20",
                shopid: "",
                customerid: "",
                staffid: "",
                uid_cp: "",
                gdid: "",
                dtime: "",
                stime: "",
                time: "",
                is_yy: "2",
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.statistical-three {
    width: calc(100% - 601px);
    padding: 10px 12px;
    .infoData-box {
        height: 100vh;
    }
    .head-title {
        height: 38px;
        margin-bottom: 14px;
        border-bottom: 2px solid #e4e7ed;
        display: flex;
        align-items: center;
        font-size: 18px;
    }
    ::v-deep.el-form {
        display: flex;
        .select-w {
            width: 137px;
            margin-right: 10px;
        }
    }
    .info-box {
        // margin: 20px 0;
        margin-bottom: 20px;
        display: flex;
        padding: 10px;
        background: #f2f2f2;
        border-radius: 5px;
        &:last-child {
            margin-bottom: 0;
        }
        .img-box {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            border-radius: 5px;
            background: #ededed;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            &.img-w {
                width: 100px;
                height: 100px;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            span {
                font-size: 18px;
                font-weight: bold;
            }
        }
        .content-box {
            font-size: 14px;

            // .title,
            // .doc {
            //     width: 400px;
            //     white-space: nowrap;
            //     text-overflow: ellipsis;
            //     overflow: hidden;
            // }
            .title {
                display: flex;
                span {
                    margin-right: 10px;
                }
                .tag {
                    padding: 0 5px;
                    padding-bottom: 2px;
                    border-radius: 3px;
                    border: 1px solid #ff6600;
                    color: #ff6600;
                    font-size: 12px;
                }
            }
            .doc {
                margin-top: 7px;
                font-size: 12px;
                color: #666;
            }
            .data-box {
                margin-top: 7px;
                font-size: 12px;
                color: #666;
                display: flex;
                .felx {
                    width: 200px;
                    &.felx-w {
                        width: auto;
                    }
                    .data {
                    }
                }
            }
        }
    }
    ::v-deep.time-box {
        margin-bottom: 20px;
        .el-tag {
            cursor: pointer;
        }
    }
    .list-box {
        height: calc(100% - 260px);
        overflow: auto;
        &.list-box-h {
            height: calc(100% - 312px);
        }
        .list-row {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            .info {
                width: 100%;
                &.info-w {
                    width: calc(100% - 90px);
                }
            }
            &:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                border: none;
            }
            .img-box {
                width: 80px;
                height: 80px;
                border-radius: 5px;
                overflow: hidden;
                margin-right: 10px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .title-time {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                .title {
                    font-size: 14px;
                    span {
                    }
                    .name {
                        font-size: 12px;
                        color: #999;
                        margin-left: 10px;
                    }
                }
                .time {
                    font-size: 12px;
                    color: #999;
                    padding-right: 10px;
                }
            }
            .doc {
                color: #999;
                margin: 7px 0;
            }
            .data-num {
                display: flex;
                .num {
                    flex: 1;
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }
}
</style>